<template>
    <!-- 主体可变化内容 -->
    <div class="main-content">
        <div class="main-content-center">
            <!-- 个人中心 -->
            <div class="main-content-left">
                <div class="userInfo">
                    <div class="rightNail" v-if="isOther">
                        <el-dropdown @command="handleCommand">
                            <i class="el-icon-more rightNailText"></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="black"
                                    >拉黑</el-dropdown-item
                                >
                                <el-dropdown-item
                                    command="del"
                                    v-if="userInfo.follow_state == 1"
                                    >取消关注</el-dropdown-item
                                >
                                <el-dropdown-item command="add" v-else
                                    >关注</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div>
                        <img :src="userInfo.avatar" />
                        <div class="niName">
                            {{ userInfo.nicheng }}
                        </div>
                    </div>
                </div>
                <div class="userInfo-nav">
                    <div class="siderNav">
                        <div
                            class="navItem"
                            :class="{ isActive: listMode == 'fans' }"
                            @click="changMode('fans')"
                        >
                            粉丝
                        </div>
                        <div
                            class="navItem"
                            :class="{ isActive: listMode == 'follow' }"
                            @click="changMode('follow')"
                        >
                            关注
                        </div>
                        <div
                            class="navItem"
                            :class="{ isActive: listMode == 'like' }"
                            @click="changMode('like')"
                        >
                            获赞
                        </div>
                        <div
                            class="navItem"
                            :class="{ isActive: listMode == 'black' }"
                            @click="changMode('black')"
                            v-if="!isOther"
                        >
                            黑名单
                        </div>
                    </div>

                    <div class="perpoList">
                        <div
                            class="perpoList_item"
                            v-for="(item, index) in listData"
                            :key="item.user_id + index"
                            :class="{ isfollow: listMode == 'follow' }"
                            @click="toOtherHome(item)"
                        >
                            <div class="left_top">
                                <div class="left_top_info">
                                    <el-avatar
                                        size="medium"
                                        :src="item.avatar"
                                    ></el-avatar>
                                    <div class="left_top_name">
                                        {{ item.nicheng }}
                                    </div>
                                </div>
                                <!-- //按钮权限 -->
                                <!-- //粉丝 -->
                                <div v-if="listMode == 'fans'">
                                    <div v-if="!isOther">
                                        <div
                                            class="guanzhuBtn"
                                            v-if="item.is_mutual_follow == 0"
                                            @click.stop="UserFollowAdd(item)"
                                        >
                                            关注
                                        </div>
                                        <div
                                            class="guanzhuBtn"
                                            v-if="item.is_mutual_follow == 1"
                                            @click.stop="UserFollowDel(item)"
                                        >
                                            取消关注
                                        </div>
                                    </div>
                                    <!-- 他人主页 -->
                                    <div v-if="isOther">
                                        <div
                                            class="guanzhuBtn"
                                            v-if="item.form_is_mutual_follow"
                                            @click.stop="UserFollowDel(item)"
                                        >
                                            取消关注
                                        </div>
                                        <div
                                            class="guanzhuBtn"
                                            v-else
                                            @click.stop="UserFollowAdd(item)"
                                        >
                                            关注
                                        </div>
                                    </div>
                                </div>
                                <!-- 关注 -->
                                <div v-if="listMode == 'follow'">
                                    <div
                                        class="guanzhuBtn"
                                        @click.stop="UserFollowDel(item)"
                                    >
                                        取消关注
                                    </div>
                                </div>

                                <!-- 黑名单 -->
                                <div v-if="listMode == 'black'">
                                    <div
                                        class="guanzhuBtn"
                                        @click.stop="BlackDel(item)"
                                    >
                                        移除
                                    </div>
                                </div>
                            </div>
                            <!-- 副标题切换 -->
                            <div class="left_bottom" v-if="listMode == 'fans'">
                                <span>关注了你</span>
                                <span class="left_bottom_time">{{
                                    item.creat_time | getTime
                                }}</span>
                            </div>
                            <div
                                class="left_bottom"
                                v-if="
                                    listMode == 'follow' || listMode == 'black'
                                "
                            >
                                <span>{{ item.autograph }}</span>
                            </div>
                            <div class="left_bottom" v-if="listMode == 'like'">
                                <span
                                    >给了你的作品{{ item.title }}点了个赞</span
                                >
                            </div>
                        </div>
                        <div v-if="listData.length == 0" class="noMore">
                            -- 暂无数据 --
                        </div>
                        <div class="bottomPage">
                            <el-pagination
                                small
                                layout="prev, pager, next"
                                :total="total"
                                @current-change="handleCurrentChange"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-content-right-fix">
                <VideoArile
                    :userInfo="userInfo"
                    :isOther="isOther"
                    ref="VideoArile"
                ></VideoArile>
            </div>
        </div>
    </div>
</template>

<script>
//通知页面
import VideoArile from "./components/personalHomepage/videoarile";
import {
    getUserHomePage,
    getUserFandList,
    getUserFollowList,
    getIsLikeList,
    getUserBlackList,
    saveUserFollowAdd,
    saveUserFollowDel,
    saveBlackDel,
    getUserHomeByFrom,
    saveBlackAdd
} from "@/api/personalHomepage/index";
import { getFormatTime } from "@/utils/timeUtils";

export default {
    components: {
        VideoArile
    },
    props: {},
    data() {
        return {
            userInfo: {}, //个人页信息
            listData: [], //左侧列表
            listMode: "fans", //列表选择
            page: 1,
            pagesize: 10,
            total: 0,
            //列表选择方法
            swichFun: {
                fans: this.getUserFand,
                follow: this.getUserFollow,
                like: this.getIsLike,
                black: this.getUserBlack
            },
            isOther: false, //是否他人个人主页
            otherForm: {}, //他人个人主页查询参数
            userID: "" //他人ID
        };
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000);
            }
        }
    },
    watch: {
        $route() {
            this.chackIsOther();
        }
    },
    mounted() {
        this.chackIsOther();
    },
    methods: {
        //检查是否其他人主页
        chackIsOther() {
            this.userID = this.$route.query.user_id;
            if (this.userID) {
                this.isOther = true;
                this.otherForm = {
                    form_id: this.userID
                };
            } else {
                this.isOther = false;
                this.otherForm = {};
            }
            if (this.isOther) {
                this.UserHomeByFrom();
            } else {
                this.UserHomePage();
            }
            this.listMode = "fans";
            this.getRightList();
            this.$nextTick(() => {
                this.$refs.VideoArile.activeName = "video";
                this.$refs.VideoArile.handleClick();
            });
        },
        //获取个人主页
        async UserHomePage() {
            var query = {};
            var list = await getUserHomePage(query);
            if (list.code == 200) {
                this.userInfo = list.data;
            }
        },
        //右侧列表
        async getRightList() {
            var query = {
                page: this.page,
                pagesize: this.pagesize,
                ...this.otherForm
            };
            this.swichFun[this.listMode](query);
        },
        //获取个人粉丝
        async getUserFand(query) {
            // this.listData = [];
            var list = await getUserFandList(query);
            if (list.code == 200) {
                this.listData = list.data.data;
                this.total = list.data.total;
            } else {
                this.listData = [];
                this.total = 0;
            }
        },
        //获取个人关注
        async getUserFollow(query) {
            // this.listData = [];
            var list = await getUserFollowList(query);
            if (list.code == 200) {
                this.listData = list.data.data;
                this.total = list.data.total;
            } else {
                this.listData = [];
                this.total = 0;
            }
        },
        //获取个人点赞
        async getIsLike(query) {
            // this.listData = [];
            query.user_id = this.$store.getters.userInfo.id;
            var list = await getIsLikeList(query);
            if (list.code == 200) {
                this.listData = list.data.data;
                this.total = list.data.total;
            } else {
                this.listData = [];
                this.total = 0;
            }
        },
        //获取黑名单
        async getUserBlack(query) {
            // this.listData = [];
            var list = await getUserBlackList(query);
            if (list.code == 200) {
                this.listData = list.data.data;
                this.total = list.data.total;
            } else {
                this.listData = [];
                this.total = 0;
            }
        },
        //关注
        async UserFollowAdd(item) {
            var query = {
                form_id: item.user_id
            };
            var list = await saveUserFollowAdd(query);
            if (list.code == 200) {
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "操作成功!"
                });
                this.getRightList();
            } else {
                this.$message({
                    message: list.msg,
                    type: "warning"
                });
            }
        },
        //取消关注
        async UserFollowDel(item) {
            var query = {
                form_id: item.user_id
            };
            var list = await saveUserFollowDel(query);
            if (list.code == 200) {
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "操作成功!"
                });
                this.getRightList();
            } else {
                this.$message({
                    message: list.msg,
                    type: "warning"
                });
            }
        },
        //移除黑名单
        async BlackDel(item) {
            var query = {
                form_id: item.user_id
            };
            var list = await saveBlackDel(query);
            if (list.code == 200) {
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "操作成功!"
                });
                this.getRightList();
            } else {
                this.$message({
                    message: list.msg,
                    type: "warning"
                });
            }
        },
        //路由带参跳转
        toOtherHome(item) {
            if (this.listMode != "follow") {
                return;
            }
            if (
                this.$route.query.user_id &&
                this.$route.query.user_id == item.user_id
            ) {
                return;
            }
            this.$router.push({
                path: "/personalCenter/personalHomepage",
                query: {
                    user_id: item.user_id
                }
            });
        },
        //切换列表
        changMode(name) {
            this.page = 1;
            this.listMode = name;
            this.getRightList();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getRightList();
        },
        //拉黑，关注等
        handleCommand(command) {
            if (command == "del") {
                this.UserFollowDel({ user_id: this.userID });
            } else if (command == "add") {
                this.UserFollowAdd({ user_id: this.userID });
            } else if (command == "black") {
                //拉黑
                this.BlackAdd();
            }
        },
        //拉黑
        async BlackAdd() {
            var query = {
                form_id: this.userID
            };
            var list = await saveBlackAdd(query);
            if (list.code == 200) {
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "操作成功!"
                });
                this.getRightList();
            } else {
                this.$message({
                    message: list.msg,
                    type: "warning"
                });
            }
        },
        //他人主页
        async UserHomeByFrom() {
            var query = {
                ...this.otherForm
            };
            var list = await getUserHomeByFrom(query);
            if (list.code == 200) {
                this.userInfo = list.data;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.main-content-center {
    width: 100%;
    padding: 26px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
/* 个人中心 */
.main-content-left {
    width: 328px;
    height: 100%;
    .userInfo {
        width: 100%;
        min-height: 207px;
        border-radius: 8px;
        background: #fff;
        padding: 30px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;

        .rightNail {
            position: absolute;
            top: 15px;
            right: 20px;

            .rightNailText {
                font-size: 20px;
                color: #42a180;
                cursor: pointer;
            }
        }

        img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #6d7785;
        }

        .niName {
            font-size: 20px;
            font-weight: bold;
            margin-top: 5px;
        }
    }
    .userInfo-nav {
        width: 328px;
        border-radius: 8px;
        background: #fff;
        margin-top: 30px;
        padding: 30px;
        box-sizing: border-box;
        min-height: 300px;

        .siderNav {
            width: 100%;
            border-bottom: 1px #a8a7a7 dashed;
            display: flex;
            justify-content: space-between;

            .navItem {
                font-size: 16px;
                font-weight: 600;
                color: #949aa4;
                margin-bottom: 20px;
                cursor: pointer;
            }

            .isActive {
                color: #42a180;
            }
        }

        .perpoList {
            width: 100%;
            box-sizing: border-box;
            margin-top: 28px;

            .perpoList_item {
                width: 100%;
                margin-bottom: 25px;

                .left_top {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left_top_info {
                        display: flex;
                        align-items: center;

                        .left_top_name {
                            margin-left: 8px;
                            font-size: 14px;
                            color: #a7a9af;
                        }
                    }
                }

                .left_bottom {
                    margin-top: 8px;
                    font-size: 14px;
                    color: #a7a9af;

                    .left_bottom_time {
                        margin-left: 8px;
                    }
                }

                .guanzhuBtn {
                    font-size: 12px;
                    background: #028755;
                    color: #fff;
                    padding: 8px 15px;
                    border-radius: 15px;
                    overflow: hidden;
                    cursor: pointer;
                    &:hover {
                        opacity: 0.7;
                    }
                }
            }

            .bottomPage {
                width: 100%;
                text-align: center;
            }
        }
    }
}

.noMore {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #6d7785;
    margin: 60px 0;
}

.isfollow {
    cursor: pointer;
}

.main-content-right-fix {
    width: calc(100% - 328px);
    height: 100%;
    min-height: 764px;
}
//过渡动画
/* fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
